<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>个税APP申报指南</title>
	<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
	<style>
	*{  
			  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
			  -webkit-user-select:none; /*webkit浏览器*/   
			  -khtml-user-select:none; /*早期浏览器*/   
			  -moz-user-select:none;/*火狐*/   
			  -ms-user-select:none; /*IE10*/   
			  user-select:none;   
		} 
		input{  
			-webkit-user-select:auto; /*webkit浏览器*/     
		}
		img{
			-webkit-user-select: none;
			user-select: none;
			-webkit-touch-callout: none;
		}
		body{
			width: 100%;
			height:100%;
			/* overflow: scroll; */
		}
		#bg{
			position: fixed;
			bottom: 0;
			left: -264px;
			width: 1400px;
			height: 1920px;
			background: #ccc;
			background: url('http://img.isyour.cn/guide_bg.png');
			background-size: 100%;
			z-index: 1;
			/* overflow: hidden; */
		}
		#car{
			position: fixed;
			width: 60px;
			z-index: 2;
			display: block;
		}
		#loc1{
			position: absolute;
			bottom: 220px;
			left: 748px;
			z-index: 3;
			text-align: center;
		}
		#loc2{
			position: absolute;
			bottom: 667px;
			left: 540px;
			z-index: 3;
			text-align: center;
		}
		#loc3{
			position: absolute;
			bottom: 910px;
			left: 971px;
			z-index: 3;
			text-align: center;
		}
		#loc4{
			position: absolute;
			bottom: 1382px;
			left: 485px;
			z-index: 3;
			text-align: center;
		}
		#loc5{
			position: absolute;
			bottom: 1275px;
			left: 185px;
			z-index: 3;
			text-align: center;
		}
		.step{
			width: 60px;
    		margin-bottom: -34px;
		}
		.step5{
			width: 140px;
    		margin-bottom: -34px;
		}
		.house{
			width: 180px;
		}
		
		#startBtnBox{
			position: fixed;
			left: 50%;
			bottom: .625rem;
			width: 1.875rem;
			height: 1.875rem;
			margin-left: -.9375rem;
			z-index: 3;
		}
		#btn{
			position: absolute;
			left: 0;
			top:  0;
			width: 100%;
			z-index: 1;
		}
		#btnMask{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
		}
		.rotate90{
			transform:rotate(90deg);
			-ms-transform:rotate(90deg); 	/* IE 9 */
			-moz-transform:rotate(90deg); 	/* Firefox */
			-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
			-o-transform:rotate(90deg); 	/* Opera */
		}
		

		@-webkit-keyframes rotation{
        from {margin-bottom: 0px;}
        to {margin-bottom: -34px;}
        }

        .step{
        animation: rotation 1s linear infinite;
        -moz-animation: rotation 1s linear infinite;
        -webkit-animation: rotation 1s linear infinite;
        -o-animation: rotation 1s linear infinite;
		}
		#firstTipsBox{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
			z-index: 4;
			text-align: center;
			/* display: none; */
		}
		#firstTipsContent{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display:box;
			display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
			display:-webkit-flex; /* Chrome */
			display:-moz-box;     /* Firefox 19 */
			display:-ms-flexbox;   
			display:flex;  /*flex容器*/

			-webkit-justify-content: center;
			-moz-justify-content: center;
			-ms-justify-content: center;
			-o-justify-content: center;
			justify-content: center;

			-webkit-align-items:center;
			-moz-align-items:center;
			-ms-align-items:center;
			-o-align-items:center;
			align-items:center;

			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			-o-flex-direction: column; 
			flex-direction:column;
		}
		#firstTipsContent_in{
			position: relative;
		}
		#firstTipsBox .tips0{
			width: 9.375rem;
			position: relative;
		}
		#firstTipsBox .iKnow{
			position: absolute;
			width: 3.125rem;
			margin-left: -1.5625rem;
			left: 50%;
			top: 13rem;
			z-index: 2;
		}
		#guidBox{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.7);
			z-index: 4;
			text-align: center;
			padding-top: .125rem;
			display: none;
		}
		.guidContent{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display:box;
			display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
			display:-webkit-flex; /* Chrome */
			display:-moz-box;     /* Firefox 19 */
			display:-ms-flexbox;   
			display:flex;  /*flex容器*/

			-webkit-justify-content: center;
			-moz-justify-content: center;
			-ms-justify-content: center;
			-o-justify-content: center;
			justify-content: center;

			-webkit-align-items:center;
			-moz-align-items:center;
			-ms-align-items:center;
			-o-align-items:center;
			align-items:center;

			-webkit-flex-direction: column;
			-moz-flex-direction: column;
			-ms-flex-direction: column;
			-o-flex-direction: column; 
			flex-direction:column;
		}
		.guidContent_in{
			position: relative;
		}
		#guidBox .guidImg{
			width: 9.375rem;
			position: relative;
		}
		#guidBox .close{
			width: 1.25rem;
		}
		#menuBtn{
			width: 1.25rem;
			position: fixed;
			top: .625rem;
			left: .625rem;
			z-index: 3;
		}
		#menuListBox{
			width: 6.25rem;
			position: fixed;
			top: 1.675rem;
			left: .325rem;
			z-index: 3;
			display: none;
		}
		#menuList{
			position: absolute;
			top: 2.1rem;
			left: 1.4rem;
			font-size: .4rem;
			line-height: 1.2rem;
			font-weight: bold;
			color: rgb(98, 126, 114);
		}
		#menuList span{
			font-weight: normal;
		}
		#menuListBox img{
			width: 100%;
		}
		#guidFiveBtnBox{
			position: absolute;
			top: 10.3rem;
			left: 0.1rem;
			width: 100%;
		}
		#guidFiveBtnBox .guidBtn{
			margin-right: 0.2rem;
			width: 3.2rem;
		}
	</style>
</head>
<body>

	<div id="bg">
		<div id="loc1" onclick="showGuidImg(1)">
			<img class="step step1" src="http://img.isyour.cn/step1.png" alt="">
			<br>
			<img class="house" src="http://img.isyour.cn/house1.png" alt="">
		</div>
		<div id="loc2" onclick="showGuidImg(2)">
			<img class="step step2" src="http://img.isyour.cn/step2.png" alt="">
			<br>
			<img class="house" src="http://img.isyour.cn/house2.png" alt="">
		</div>
		<div id="loc3" onclick="showGuidImg(3)">
			<img class="step step3" src="http://img.isyour.cn/step3.png" alt="">
			<br>
			<img class="house" src="http://img.isyour.cn/house3.png" alt="">
		</div>
		<div id="loc4" onclick="showGuidImg(4)">
			<img class="step step4" src="http://img.isyour.cn/step4.png" alt="">
			<br>
			<img class="house" src="http://img.isyour.cn/house4.png" alt="">
		</div>
		<div id="loc5" onclick="showGuidImg(5)">
			<img class="step step5" src="http://img.isyour.cn/step5.png" alt="">
		</div>
	</div>
	<img id="car" src="http://img.isyour.cn/car.png"></img>
	<div id="startBtnBox">
		<img id="btn" src="http://img.isyour.cn/btn.png"></img>
		<div id="btnMask"></div>
	</div>
	
	<div id="firstTipsBox">
		<div id="firstTipsContent">
			<div id="firstTipsContent_in">
					<img class="tips0" src="http://img.isyour.cn/s_0.png" alt="">
					<img class="iKnow" onclick="$('#firstTipsBox').fadeOut()" src="http://img.isyour.cn/ok.png" alt="">
			</div>
		</div>
		
	</div>
	<img id="menuBtn" onclick="$('#menuListBox').slideToggle()" src="http://img.isyour.cn/list.png" alt="">
	<div id="menuListBox">
		<img src="http://img.isyour.cn/list2.png" alt="">
		<div id="menuList">
			<p onclick="showGuidImg(1)">第一步：<span>地点选择</span></p>
			<p onclick="showGuidImg(2)">第二步：<span>登陆注册</span></p>
			<p onclick="showGuidImg(3)">第三步：<span>身份认证</span></p>
			<p onclick="showGuidImg(4)">第四步：<span>完善信息</span></p>
			<p onclick="showGuidImg(5)">第五步：<span>完成注册</span></p>
		</div>
	</div>
	<div id="guidBox">
		
	</div>
	<script src="http://img.isyour.cn/jquery.min.js"></script>
	<script>
	var timer=null;
	// var LocArrs=[
	// 		{x:80,y:1740,rotate:0},
	// 		{x:120,y:1740,rotate:0},
	// 		{x:160,y:1740,rotate:0},
	// 		{x:200,y:1740,rotate:0},
	// 		{x:240,y:1740,rotate:0},
	// 		{x:280,y:1740,rotate:0},
	// 		{x:320,y:1740,rotate:0},
	// 		{x:360,y:1740,rotate:0},
	// 		{x:400,y:1740,rotate:0},
	// 		{x:440,y:1740,rotate:0},
	// 		{x:480,y:1730,rotate:-10},
	// 		{x:510,y:1720,rotate:-30},
	// 		// {x:540,y:1725,rotate:-20},
	// 		{x:540,y:1690,rotate:-40},
	// 		// {x:580,y:1690,rotate:-40},
	// 		{x:560,y:1670,rotate:-60},
	// 		{x:580,y:1640,rotate:-70},
	// 		{x:580,y:1620,rotate:-80},
	// 		{x:580,y:1580,rotate:-90},
	// 		{x:580,y:1540,rotate:-100},
	// 		{x:580,y:1500,rotate:-110},
	// 		{x:560,y:1460,rotate:-120},
	// 		{x:530,y:1420,rotate:-130},
	// 		{x:500,y:1380,rotate:-130},
	// 		{x:470,y:1340,rotate:-130},
	// 		{x:440,y:1300,rotate:-130},
	// 		{x:410,y:1260,rotate:-130},
	// 		{x:370,y:1220,rotate:-125},
	// 		{x:350,y:1180,rotate:-115},
	// 		{x:340,y:1140,rotate:-90},
	// 		{x:340,y:1100,rotate:-80},
	// 		{x:360,y:1060,rotate:-60},
	// 		{x:390,y:1020,rotate:-40},
	// 		{x:430,y:980,rotate:-30},
	// 		{x:470,y:960,rotate:-30},
	// 		{x:500,y:940,rotate:-30},
	// 		{x:560,y:900,rotate:-50},
	// 		{x:590,y:860,rotate:-70},
	// 		{x:600,y:820,rotate:-90},
	// 		{x:590,y:780,rotate:-110},
	// 		{x:570,y:740,rotate:-125},
	// 		{x:540,y:700,rotate:-135},
	// 		{x:510,y:660,rotate:-140},
	// 		{x:470,y:620,rotate:-140},
	// 		{x:440,y:600,rotate:-140},
	// 		{x:410,y:580,rotate:-140},
	// 		{x:380,y:540,rotate:-160},
	// 		{x:350,y:540,rotate:-180},
	// 		{x:330,y:540,rotate:-190},
	// 		{x:300,y:535,rotate:-190},
	// 		{x:260,y:545,rotate:-190},
	// 		{x:220,y:550,rotate:-180},
	// 		{x:160,y:550,rotate:-170},
	// 		{x:130,y:540,rotate:-160},
	// 		{x:100,y:535,rotate:-160},
	// 		{x:80,y:530,rotate:-160},
	// 		{x:75,y:530,rotate:-165},
	// 		{x:72,y:530,rotate:-170},
	// 		{x:68,y:530,rotate:-170},
	// 		{x:64,y:530,rotate:-170},
	// 		{x:60,y:530,rotate:-180},
	// 		{x:55,y:535,rotate:-190},
	// 		{x:50,y:540,rotate:-200},
	// 		{x:40,y:545,rotate:-220},
	// 		{x:25,y:560,rotate:-225},
	// 		{x:0,y:580,rotate:-230},
	// 		{x:-30,y:620,rotate:-230},
	// 		{x:-60,y:660,rotate:-230},
	// 		{x:-90,y:700,rotate:-235,step:5},

	// 	]

		var LocArr=[
			{x:474,y:1734,rotate:0},
			{x:494,y:1734,rotate:0},
			{x:514,y:1734,rotate:0},
			{x:534,y:1734,rotate:0},
			{x:554,y:1734,rotate:0},
			{x:574,y:1734,rotate:0},
			{x:594,y:1734,rotate:0},
			{x:614,y:1734,rotate:0},
			{x:634,y:1734,rotate:0},
			{x:654,y:1734,rotate:0},
			{x:674,y:1734,rotate:0},
			{x:694,y:1734,rotate:0},
			{x:714,y:1734,rotate:0},
			{x:734,y:1734,rotate:0},
			{x:754,y:1734,rotate:0},
			{x:774,y:1734,rotate:0},
			{x:794,y:1734,rotate:0},
			{x:814,y:1734,rotate:0},
			{x:834,y:1734,rotate:-5},
			{x:854,y:1730,rotate:-8},
			{x:874,y:1724,rotate:-15},
			{x:894,y:1716,rotate:-25},
			{x:910,y:1705,rotate:-30},
			{x:926,y:1694,rotate:-40},
			{x:938,y:1682,rotate:-50},
			{x:949,y:1668,rotate:-60},
			{x:959,y:1649,rotate:-70},
			{x:966,y:1628,rotate:-80},
			{x:968,y:1616,rotate:-80},
			{x:971,y:1605,rotate:-80},
			{x:974,y:1590,rotate:-84},
			{x:975,y:1571,rotate:-90},
			{x:974,y:1533,rotate:-98},
			{x:970,y:1513,rotate:-102},
			{x:965,y:1496,rotate:-107},
			{x:956,y:1476,rotate:-110},
			{x:937,y:1449,rotate:-120},
			{x:900,y:1400,rotate:-125},
			{x:876,y:1370,rotate:-125},
			{x:854,y:1339,rotate:-125},
			{x:828,y:1310,rotate:-125},
			{x:804,y:1278,rotate:-125},
			{x:780,y:1240,rotate:-125},
			{x:757,y:1217,rotate:-125},
			{x:741,y:1184,rotate:-115},
			{x:731,y:1160,rotate:-110},
			{x:731,y:1146,rotate:-100},
			{x:732,y:1107,rotate:-90},
			{x:740,y:1070,rotate:-78},
			{x:749,y:1054,rotate:-68},
			{x:760,y:1037,rotate:-60},
			{x:772,y:1024,rotate:-50},
			{x:785,y:1009,rotate:-45},
			{x:800,y:995,rotate:-40},
			{x:817,y:984,rotate:-35},
			{x:832,y:973,rotate:-35},
			{x:849,y:965,rotate:-30},
			{x:867,y:957,rotate:-30},
			{x:883,y:947,rotate:-30},
			{x:902,y:939,rotate:-30},
			{x:918,y:931,rotate:-30},
			{x:934,y:920,rotate:-35},
			{x:949,y:908,rotate:-40},
			{x:963,y:893,rotate:-50},
			{x:974,y:877,rotate:-60},
			{x:981,y:860,rotate:-70},
			{x:986,y:841,rotate:-80},
			{x:982,y:820,rotate:-90},
			{x:986,y:802,rotate:-100},
			{x:982,y:783,rotate:-110},
			{x:976,y:766,rotate:-120},
			{x:954,y:733,rotate:-125},
			{x:930,y:704,rotate:-125},
			{x:905,y:673,rotate:-125},
			{x:881,y:644,rotate:-125},
			{x:856,y:614,rotate:-125},
			{x:832,y:585,rotate:-125},
			{x:803,y:558,rotate:-135},
			{x:787,y:547,rotate:-145},
			{x:771,y:539,rotate:-155},
			{x:753,y:533,rotate:-165},
			{x:733,y:529,rotate:-170},
			{x:714,y:527,rotate:-175},
			{x:695,y:527,rotate:-180},
			{x:675,y:529,rotate:-185},
			{x:657,y:535,rotate:-190},
			{x:639,y:540,rotate:-190},
			{x:620,y:545,rotate:-190},
			{x:601,y:548,rotate:-190},
			{x:582,y:549,rotate:-185},
			{x:563,y:550,rotate:-180},
			{x:544,y:549,rotate:-175},
			{x:525,y:543,rotate:-170},
			{x:506,y:539,rotate:-165},
			{x:490,y:530,rotate:-160},
			{x:472,y:522,rotate:-175},
			{x:460,y:520,rotate:-180},
			{x:449,y:519,rotate:-185},
			{x:440,y:523,rotate:-195},
			{x:435,y:527,rotate:-210},
			{x:435,y:527,rotate:-210},
			{x:416,y:547,rotate:-220},
			{x:405,y:558,rotate:-230},
			{x:387,y:580,rotate:-230},
			{x:368,y:604,rotate:-230},
			{x:350,y:627,rotate:-230},
			{x:332,y:651,rotate:-230},
		]
	window.onload=function(){
		var bgWidth=1400;
		var bgHeight=1931;
		var pointHeight=1734;  //起始位置高度
		var screenWidth=$(document).width();
		var screenHeight=$(document).height()
		// 假定车的初始坐标为(40px,663px);
		var carX=160;  //车位置x轴
		var carWidth=60;//车辆宽度
		var carY=pointHeight-(bgHeight-screenHeight);//车位置y轴
		$('#car').css({
			left:carX+'px',
			top:carY+'px'

		})
		var index=0;
		var moveStatus=false;
		var left=-264; //
		var bottom=0;
		$("#btnMask").on({
		    touchstart: function(e){
		    	// 长按事件触发  
	            timeOutEvent = setTimeout(function() {
	            	moveStatus=true;  
	                timeOutEvent = 0;  
	                // alert('你长按了'); 
					var func=function(){
							clearInterval(timer);
							if(moveStatus && index<LocArr.length){
								left=-(LocArr[index].x-carX-carWidth/2);
								bottom=-(pointHeight-LocArr[index].y);
									$('#bg').animate({
										left:left+'px',
										bottom:bottom+'px',
									},120);
									$('#car').css({
										'transform':'rotate('+LocArr[index].rotate+'deg)'
									})
									index++;
									var timer=setTimeout(function(){
										func()
									}, 120);
									
							}else{
								clearTimeout(timer); 
							}
					}
					func()	
	            }, 800);
	            //长按1000毫秒   
				
		    },
		    touchmove: function() {  
	            clearTimeout(timeOutEvent);  
	            timeOutEvent = 0;  
	        }, 
		    touchend: function(e){
		    	clearTimeout(timeOutEvent); 
		         moveStatus=false;
	            if (timeOutEvent != 0) {  
	                // 点击事件  
	                // location.href = '/a/live-rooms.html';  
	                // alert('你点击了');  
	            }  
	            return false; 
	        }
		});

	}

	function showGuidImg(index){
		var html
		if(index==5){
			html=
			'<div class="guidContent">'+
				'<div class="guidContent_in">'+
					'<img class="guidImg" src="http://img.isyour.cn/s_'+index+'.png" alt="">'+
					'<div id="guidFiveBtnBox">'+
						'<img onclick="window.location.href=\'https://its.etax-gd.gov.cn/download.html\'" class="guidBtn" src="http://img.isyour.cn/download.png" alt="">'+
						'<img onclick="window.location.reload()" class="guidBtn" src="http://img.isyour.cn/again.png" alt="">'+
					'</div>'+
				'</div>'+
			'</div>'
		}else{
			html=
			'<div class="guidContent">'+
				'<img class="guidImg" src="http://img.isyour.cn/s_'+index+'.png" alt="">'+
				'<br>'+
				'<img onclick="$(\'#guidBox\').fadeOut()" class="close"src="http://img.isyour.cn/guide_close.png" alt="">'+
			'</div>'
		}
		
		$('#guidBox').html(html)
		$('#guidBox').fadeIn()
	}
	</script>
</body>
</html>